<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>ol{background-color: rgba(0, 255, 255, 0.26);height: 300px;display: flex;list-style-type: none;}*{padding: 0; margin:0; }
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .clears{
            clear: both;
            font-size: 0;
            line-height: 0;
            height: 0;
            overflow: hidden;
        }
        body{
            font-family: Arial,Verdana,"Micosoft yahei";
        }
        table{
            border-collapse: collapse;
        }
        .bx img{
            width:100%;height: 100%;
            border-radius: 10px 10px;
        }
        .bx:hover img{
        position: relative;
        transform: translatey(-10px);
        transition: all .3s;
        }
        .big p{
            font-size: 30px;
            text-align: center;
           
        }
        .big p:hover{
            font-size: 40px;
            transition: all .5s;
        }
        .box{
           margin-left: auto;
           margin-right: auto;
           margin-top: auto;
        }
        </style>
</head>
<body>
    <head><h1 style="text-align: center;">229970906邓又超的作业</h1></head>
    <div class="box">
        <ol>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="http://deng-youchao.gitee.io/229970906-deng-youchao/" class="bx"><img src="./images/chengfabiao.png" alt="作业1"></a><a href="http://deng-youchao.gitee.io/229970906-deng-youchao" ><span class="big"><p>作业1</p><p style="font-size: 12px;text-align: center;">99乘法表</p></span></a></li>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="http://deng-youchao.gitee.io/sir.2" class="bx"><img src="./images/sanjiaoxing.png" alt="作业2"></a><a href="http://deng-youchao.gitee.io/sir.2" ><span class="big"><p>作业2</p><p style="font-size: 12px;text-align: center;">三角形与平行四边形的形成</p></span></a></li>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="" class="bx"><img src="./images/yuanshen.png" alt="作业3"></a><a href="" ><span class="big"><p>作业3</p><p style="font-size: 12px;text-align: center;">原神启动</p></span></a></li>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="" class="bx"><img src="./images/yuanshen.png" alt="作业4"></a><a href="" ><span class="big"><p>作业4</p><p style="font-size: 12px;text-align: center;">原神启动</p></span></a></li>
    </ol>  
    <ol>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="" class="bx"><img src="./images/yuanshen.png" alt="作业5"></a><a href="" ><span class="big"><p>作业5</p><p style="font-size: 12px;text-align: center;">原神启动</p></span></a></li>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="" class="bx"><img src="./images/yuanshen.png" alt="作业6"></a><a href="" ><span class="big"><p>作业6</p><p style="font-size: 12px;text-align: center;">原神启动</p></span></a></li>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="" class="bx"><img src="./images/yuanshen.png" alt="作业7"></a><a href="" ><span class="big"><p>作业7</p><p style="font-size: 12px;text-align: center;">原神启动</p></span></a></li>
        <li style="background-color:rgba(0, 0, 0, 0.5); width:45%;height: 80%;margin: 20px 10px;border-radius: 10px 10px;"><a href="" class="bx"><img src="./images/yuanshen.png" alt="作业8"></a><a href="" ><span class="big"><p>作业8</p><p style="font-size: 12px;text-align: center;">原神启动</p></span></a></li>
    </ol>
</div>
</body>
</html>